<template>
    <div class="comt_list"
         v-infinite-scroll="moreList"
         infinite-scroll-disabled="loading"
         infinite-scroll-immediate-check = "true"
         infinite-scroll-distance="100" >
        <ul>
            <li v-for="item in commentList" v-if="commentList" >
                <div class="comter_avatar"><img v-lazy="item.usrPicUrl"></div>
                <div class="comt_info">
                    <div class="comt_tit comt_bot_border" @click="hide">
                        <span class="comt_date">{{item.crtTime | endTime}}</span>
                        {{item.usrName}}
                    </div>
                    <div class="comt_text">
                        <p @click="lookMore(item)">{{item.comDsc|comdeCode}}</p>
                        <div class="comt_img clearfix">
                            <span v-for="imgItem in item.commPicUrl" @click="previewImage(imgItem,item.commPicUrl)"><img v-lazy="imgItem"/></span>
                        </div>
                    </div>
                    <div class="comt_btn">
                            <!-- <span class="comt_btn_p">
                                <svg class="icon" aria-hidden="true">
                                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-dianzan"></use>
                                </svg>点赞</span> -->
                            <span @click="publishFocus(item)">
                                <svg class="icon" aria-hidden="true">
                                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-pinglun1"></use>
                                </svg>评论</span>
                    </div>
                    <!-- <div class="praise_list">
                        <i class="icon iconfont icon-dianzan"></i>
                        <a href="#">糖炒栗子，</a><a href="#">券享用户10**10，</a><a href="#">券享用户14**32，</a>
                    </div> -->
                    <!-- 回复评论 -->
                    <div v-if="item.replyDsc"  class="reply_list" @click="hide">
                        <i class="icon iconfont icon-pinglun left"></i>
                        <div class="reply_cont limit">
                            <div class="reply_item" @click="lookMore(item)" v-for="replyItem in item.replyDsc">
                                <div class="reply_person" ><span>{{replyItem.usrName}}</span>回复<span v-if="replyItem.replyUsrName!=replyItem.usrName">{{replyItem.replyUsrName}}</span><span class="right">{{replyItem.crtTime | endTime}}</span></div>
                                <p>{{replyItem.dsc|comdeCode}}</p>
                            </div>

                        </div>
                        <!-- <div v-if="item.replyDsc!=undefined" class="reply_look"> -->
                            <div v-if="item.replyDsc&&item.replyDsc.length>=3" class="reply_look">
                            <a @click="lookMore(item)">查看更多</a>
                            <span v-if="!allStatus">|</span>
                            <a @click="jumpShop(item)" v-if="!allStatus">查看{{item.usrName}}对商家评论</a>
                        </div>
                    </div>
                    <div v-if="!item.replyDsc||item.replyDsc.length<3" class="reply_look">
                        <a @click="jumpShop(item)" v-if="!allStatus">查看{{item.usrName}}对商家评论</a>
                    </div>
                </div>
            </li>

        </ul>
    </div>
</template>
<script>
    export default {
        props:["commentList","replyStyle","mchtId","allStatus"],
        data(){
            return {
                replyCom:''
            }
        },
        created:function(){
        },
        methods:{
            moreList:function(){

            },
            // 查看更多
            lookMore:function(params){
                let me = this;
                // this.$router.push({'name':'commentDetail',params:{commId:params.commId,mchtId:me.mchtId,replyStyle:1}});
                if (this.replyStyle==0) {
                    // this.$router.push({'name':'commentDetail',params:{commId:params.commId,replyStyle:0}});
                    this.$router.push({'name':'commentDetail',query:{commId:params.commId,usrId:params.usrId,replyStyle:0}});
                }else if (this.replyStyle==1){
                    // this.$router.push({'name':'commentDetail',params:{commId:params.commId,mchtId:me.mchtId,replyStyle:1}});
                    this.$router.push({'name':'commentDetail',query:{commId:params.commId,mchtId:me.mchtId,replyStyle:1}});
                }

            },
            //查看关于商家评论
            jumpShop:function(params){
                var me=this;
                // this.replyStyle=1;
                this.$router.push({'path':'/commentMyself/'+me.mchtId+'/'+params.usrId+'/1'});

            },
            // 点击评论
            publishFocus:function(data) {
                this.$emit("clickPub",data);
            },
            //失焦
            hide:function(){
                this.$emit("clickBlur")
            },
            previewImage:function(id,items){
                let me = this;
                wx.previewImage({
                    current: id, // 当前显示图片的http链接
                    urls: items // 需要预览的图片http链接列表
                });
            },

        }
    }
</script>
<style>
    .comt_list li{padding:1rem .667rem 0;border-bottom: 1px solid #e8e8e8;}
    .comt_bot_border{margin:-0.375rem 0 0 0;font-weight: bold;}
    .comt_date{font-weight: normal;}
    .comt_text{padding: .667rem 0 .5rem;}
    .comt_name_fb,.comt_coupon_info_tit .comt_mcht_name{font-weight: bold;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;display: block;color:#333;}
    .comt_img{margin:0 -0.4rem;}
    .comt_img span{float: left;width: 33.3%;height:6.5rem;margin: 0.4rem 0;padding:0 0.4rem;box-sizing: border-box;display: flex;overflow: hidden;align-items: center;align-content: center;}
    .comt_img span img{width: 100%;}
</style>
